<template>
  <div class="fixed-column-table">
    <el-table
      border
      :data="tableData"
      style="width: 100%;"
      empty-text="暂无数据"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="地区项目"
        prop="projectName"
        fixed
        width="200"
      >
        <template #default="{ row }">
          <div>{{ row.projectName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="认购达成(万元)"
        prop="subscriptionNum"
        width="200"
        sortable
      >
        <template #default="{ row }">
          <div>{{ row.subscriptionNum }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        prop="createDate"
        width="200"
      >
        <template #default="{ row }">
          <div>{{ row.createDate }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="签约达成率(%)"
        prop="signingRate"
        width="200"
        sortable
      >
        <template #default="{ row }">
          <div>{{ row.signingRate }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="签约目标(万元)"
        prop="contractTarget"
        width="200"
        sortable
      >
        <template #default="{ row }">
          <div>{{ row.contractTarget }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="认未签(万元)"
        prop="countersignature"
        width="200"
        sortable
      >
        <template #default="{ row }">
          <div>{{ row.countersignature }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="认未签率(%)"
        prop="rejectionRate"
        width="200"
        sortable
      >
        <template #default="{ row }">
          <div>{{ row.rejectionRate }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="模式"
        prop="pattern"
        width="200"
      >
        <template #default="{ row }">
          <div>{{ row.pattern }}</div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120"
      >
        <template #default="{ row, $index}">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleOperation"
          >
            操作
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <base-pagination
      :total="total"
      :page-sizes="[10, 20, 30, 40, 50]"
      @do-change="pageChangeHandle"
    />
  </div>
</template>
<script lang="ts" setup name='fixed-column-table'>
import {
  ref,
  onMounted,
} from 'vue';

import { ElTable, ElMessage, ElMessageBox } from 'hive-plus';

import BasePagination from '@/components/base-pagination/index.vue';

  interface TableDataItem {
    projectName: string;
    subscriptionNum: number;
    signContractNum: number;
    contractTarget: number;
    pattern: string;
    createDate: string;
    index: number;
  }
const tableDataTemp = [
  {
    projectName: 'A-馆-A',
    subscriptionNum: 84,
    signContractNum: 234234,
    contractTarget: 34,
    pattern: '模式一',
    createDate: '2022-03-02',
    index: 1,
    signingRate: 12,
    rejectionRate: 82,
    countersignature: 293,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8,
    signContractNum: 2534,
    contractTarget: 24,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 2,
    signingRate: 99,
    rejectionRate: 18,
    countersignature: 223,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 4234,
    contractTarget: 24,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 3,
    signingRate: 36,
    rejectionRate: 48,
    countersignature: 923,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 34,
    contractTarget: 23,
    pattern: '模式三',
    createDate: '2022-03-02',
    index: 4,
    signingRate: 27,
    rejectionRate: 68,
    countersignature: 223,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 894,
    signContractNum: 74,
    contractTarget: 64,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 5,
    signingRate: 35,
    rejectionRate: 78,
    countersignature: 823,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 44,
    signContractNum: 4,
    contractTarget: 86,
    pattern: '模式一',
    createDate: '2022-03-02',
    index: 6,
    signingRate: 25,
    rejectionRate: 28,
    countersignature: 523,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 24,
    signContractNum: 23,
    contractTarget: 15,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 7,
    signingRate: 24,
    rejectionRate: 84,
    countersignature: 283,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 224,
    signContractNum: 24,
    contractTarget: 46,
    pattern: '模式三',
    createDate: '2022-03-02',
    index: 6,
    signingRate: 812,
    rejectionRate: 87,
    countersignature: 253,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 14,
    signContractNum: 94,
    contractTarget: 28,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 7,
    signingRate: 312,
    rejectionRate: 89,
    countersignature: 231,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 25,
    signContractNum: 214,
    contractTarget: 46,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 6,
    signingRate: 112,
    rejectionRate: 348,
    countersignature: 234,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 36,
    signContractNum: 3434,
    contractTarget: 65,
    pattern: '模式一',
    createDate: '2022-03-02',
    index: 7,
    signingRate: 124,
    rejectionRate: 28,
    countersignature: 273,
    width: '280',
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 12,
    signContractNum: 834,
    contractTarget: 78,
    pattern: '模式二',
    createDate: '2022-03-02',
    index: 6,
    signingRate: 127,
    rejectionRate: 88,
    countersignature: 123,
    width: '280',
  }
];
const multipleSelection = ref();
const total = ref(1);
const pageNum = ref(1);
const pageSize = ref(10);
const tableData = ref<TableDataItem[]>([]);

const initLoadData = (firstPage = false) => {
  if (firstPage) {
    pageNum.value = 1;
  }
  const start = (pageNum.value - 1) * pageSize.value;
  const end = pageNum.value * pageSize.value;
  tableData.value = tableDataTemp.slice(start, end);
  total.value = tableDataTemp.length;
};

const pageChangeHandle = (params: {currentPage: number, pageSize: number}) => {
  pageNum.value = params.currentPage;
  pageSize.value = params.pageSize;

  initLoadData();
};

const handleDelete = (row: any, index: number) => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '关闭',
    }
  ).then(() => {
    tableData.value.splice(index, 1);
    ElMessage.success('删除成功');
  }).catch(() => {
    console.log('用户点击取消删除');
  });
};

const handleOperation = () => {
  ElMessage.success('点击操作');
};

const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

onMounted(() => {
  initLoadData(false);
});

</script>
<style lang="scss" scoped>
.fixed-column-table {
  box-sizing: border-box;
  padding: 12px;
  background: #fff;
}
</style>
